<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        line-height: 100vh;
        background-color: orange;
        width: 100%;
        height: 80px;
        display: flex;
        /* flex-wrap: wrap; */
        justify-content: space-between;
      }
      .right-container {
        background-color: yellow;
        height: 80px;
        width: 160px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div style="width: 500px"></div>
      <div class="right-container">
        <div
          style="
            width: 60px;
            height: 80px;
            background-color: aqua;
            float: right;
          "
        ></div>
      </div>
    </div>
  </body>
  <script>
    const now = new Date()
    const resArr = [
      {
        id: '1195268474480156673',
        pid: '1',
        level: null,
        children: [
          {
            id: '1195268616021139457',
            pid: '1195268474480156673',
            level: null,
            children: [],
            select: null,
            name: '用户管理',
            type: '1',
            permissionValue: null,
            path: 'user/list',
            component: '/acl/user/list',
            icon: null,
            status: 1,
            isDeleted: 0,
            createTime: '2022-07-28 20:00:00',
            modifyTime: null
          },
          {
            id: '1195268788138598401',
            pid: '1195268474480156673',
            level: null,
            children: [],
            select: null,
            name: '角色管理',
            type: '1',
            permissionValue: null,
            path: 'role/list',
            component: '/acl/role/list',
            icon: null,
            status: 1,
            isDeleted: 0,
            createTime: '2022-07-28 20:00:00',
            modifyTime: null
          },
          {
            id: '1195268893830864898',
            pid: '1195268474480156673',
            level: null,
            children: [],
            select: null,
            name: '菜单管理',
            type: '1',
            permissionValue: null,
            path: 'menu/list',
            component: '/acl/menu/list',
            icon: null,
            status: 1,
            isDeleted: 0,
            createTime: '2022-07-28 20:00:00',
            modifyTime: null
          }
        ],
        select: null,
        name: '权限管理',
        type: '1',
        permissionValue: null,
        path: '/acl',
        component: 'Layout',
        icon: null,
        status: 1,
        isDeleted: 0,
        createTime: '2022-07-28 20:00:00',
        modifyTime: null
      }
    ]

    let finalArr = []
    function handlerMenuList(arr) {
      arr.forEach((item) => {
        const { path, name, component } = item
        let newObj = {}
        newObj = { path, name, component }
        if (item.children && item.children.length) {
          // 处理子项
          newObj.children = getSelectChildrenArr(item.children)
        }
        finalArr.push(newObj)
      })
      return finalArr
    }

    function getSelectChildrenArr(children) {
      let temArr = []
      children.forEach((child) => {
        if (child.children && child.children.length) {
          handlerMenuList(child.children)
        } else {
          let temObj = {}
          const { path, name, component } = child
          temObj = { path, name, component }
          temArr.push(temObj)
        }
      })
      return temArr
    }

    const res = handlerMenuList(resArr)
    console.log(res)
    // 遍历准备一个空对象 准备一个空数组这个数组应该是有children时准备 递归调用

    /*  function handlerMenuList(arr) {
      let res = []
      arr.forEach((item) => {
        let temp = {}
        if (item.children !== null) {
          const { path, name, component } = item
          temp = { path, name, component }
          temp.children = []
          temp.children.push(handlerMenuList(item.children))
        } else {
          const { path, name, component } = item
          return { path, name, component }
        }
        res.push(temp)
      })
      return res
    } */
  </script>
</html>
